<template>
  <div class="pinglun">
    <div v-loading="domLoading">
      <div
        v-if="resComments.hotComments && resComments.hotComments.length != 0"
        style="margin-bottom: 10px"
        class="marvellous_pinglun"
      >
        <div class="marvellous_pinglun_title">精彩评论</div>
        <div class="marvellous_pinglun_contact">
          <div
            class="marvellous_pinglun_contact_inside"
            v-for="item in resComments.hotComments"
            :key="item.id"
          >
            <div class="marvellous_pinglun_contact_inside_img">
              <el-image :src="item.user.avatarUrl" lazy />
            </div>
            <div class="marvellous_pinglun_contact_inside_middle">
              <div
                class="marvellous_pinglun_contact_inside_middle_top"
                :style="{
                  marginBottom: item.beReplied == 0 ? '0px' : '10px',
                }"
              >
                <span class="nickname" @click="jump(item.user.userId)"
                  >{{ item.user.nickname }}:</span
                >
                <span style="font-size: 14px">{{ item.content }}</span>
              </div>
              <div
                class="marvellous_pinglun_contact_inside_middle_middle"
                v-for="(childeItem, index) in item.beReplied"
                :key="index"
              >
                <span style="color: #66b1ff"
                  >@{{ childeItem.user.nickname }}:</span
                >
                <span>{{ childeItem.content }}</span>
              </div>
              <div class="marvellous_pinglun_contact_inside_middle_bottom">
                <div>
                  <span style="margin-right: 10px">{{
                    `${new Date(item.time).getFullYear()}年${new Date(
                      item.time
                    ).getMonth()}月${new Date(item.time).getDate()}日`
                  }}</span>
                  <span>{{
                    `${new Date(item.time).getHours()}:${new Date(
                      item.time
                    ).getMinutes()}`
                  }}</span>
                </div>
                <div class="marvellous_pinglun_contact_inside_right">
                  <i class="el-icon-thumb" />
                  <span style="font-size: 14px">{{ item.likedCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="resComments.comments != 0"
        style="border-bottom: 0px"
        class="marvellous_pinglun"
      >
        <div class="marvellous_pinglun_title">最新评论</div>
        <div class="marvellous_pinglun_contact">
          <div
            class="marvellous_pinglun_contact_inside"
            v-for="item in resComments.comments"
            :key="item.id"
          >
            <div class="marvellous_pinglun_contact_inside_img">
              <el-image :src="item.user.avatarUrl" lazy />
            </div>
            <div class="marvellous_pinglun_contact_inside_middle">
              <div
                class="marvellous_pinglun_contact_inside_middle_top"
                :style="{
                  marginBottom: item.beReplied == 0 ? '0px' : '10px',
                }"
              >
                <span class="nickname" @click="jump(item.user.userId)"
                  >{{ item.user.nickname }}:</span
                >
                <span style="font-size: 14px">{{ item.content }}</span>
              </div>
              <div
                class="marvellous_pinglun_contact_inside_middle_middle"
                v-for="(childeItem, index) in item.beReplied"
                :key="index"
              >
                <span
                  style="color: #66b1ff;cursor: pointer;"
                  @click="jump(childeItem.user.userId)"
                  >@{{ childeItem.user.nickname }}:</span
                >
                <span>{{ childeItem.content }}</span>
              </div>
              <div class="marvellous_pinglun_contact_inside_middle_bottom">
                <div>
                  <span style="margin-right: 10px">{{
                    `${new Date(item.time).getFullYear()}年${new Date(
                      item.time
                    ).getMonth()}月${new Date(item.time).getDate()}日`
                  }}</span>
                  <span>{{
                    `${new Date(item.time).getHours()}:${new Date(
                      item.time
                    ).getMinutes()}`
                  }}</span>
                </div>
                <div class="marvellous_pinglun_contact_inside_right">
                  <i class="el-icon-thumb" />
                  <span style="font-size: 14px">{{ item.likedCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination" v-if="$route.path != '/pengyou'">
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="resComments.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["domLoading", "resComments"],
  methods: {
    changePage(e) {
      this.$emit("changePage", e);
    },
    jump(id) {
      this.$router.push({
        path: "/yongHu",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common/css/commonStyle";
.pinglun {
  width: 93%;
  // height: 10px;
  // background: yellow;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  .marvellous_pinglun {
    border-bottom: 1px solid rgb(235, 222, 222);
    // padding-bottom: 10px;
    .marvellous_pinglun_title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .marvellous_pinglun_contact {
      .marvellous_pinglun_contact_inside {
        display: flex;
        margin-bottom: 40px;
        .marvellous_pinglun_contact_inside_img {
          width: 60px;
          height: 60px;
          margin-right: 15px;
          // background: chocolate;
          .el-image {
            @include img_size;
            border-radius: 50%;
          }
        }
        .marvellous_pinglun_contact_inside_middle {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 75%;
          //background: chocolate;

          .marvellous_pinglun_contact_inside_middle_top {
            .nickname {
              color: #66b1ff;
              font-size: 14px;
              cursor: pointer;
            }
          }
          .marvellous_pinglun_contact_inside_middle_middle {
            padding: 10px;
            font-size: 14px;
            background: rgb(252, 249, 249);
            border-radius: 5px;
          }
          .marvellous_pinglun_contact_inside_middle_bottom {
            color: #666;
            font-size: 14px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .marvellous_pinglun_contact_inside_right {
              display: flex;
            }
          }
        }
      }
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
